<template> 
  <el-card class="form-container" shadow="never">
    <el-form :model="member" :rules="rules" ref="memberForm" label-width="150px">
      <el-form-item label="姓名：" prop="username">
        <el-input v-model="member.username"></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="gender">
        <el-radio-group v-model="member.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
          <el-radio :label="0">不详</el-radio>
        </el-radio-group>
      </el-form-item>
     
      <el-form-item label="手机号：">
        <el-input v-model="member.phone"></el-input>
      </el-form-item>
      <el-form-item label="会员分组：" >
          <el-select  @change="groupChange" v-model="member.groupId" placeholder="请选择">
              <el-option
                v-for="item in groups"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.groupStatus==1">
              </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="会员标签：">
        <el-select @change="tagChange" v-model="member.tagId" placeholder="请选择">
              <el-option
                v-for="item in tags"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
          </el-select>
      </el-form-item>
       <el-form-item label="qq：">
         <el-input v-model="member.qq"></el-input>
       </el-form-item>

        <el-form-item label="微信：">
         <el-input v-model="member.wechat"></el-input>
       </el-form-item>
         <el-form-item label="生日：">
           <el-date-picker
              v-model="member.birthday"
              type="date" value-format="yyyy-MM-dd"
              placeholder="选择日期">
           </el-date-picker>
       </el-form-item>

       <el-form-item label="纪念日：">
         <el-date-picker
              v-model="member.anniversary"
              type="date" value-format="yyyy-MM-dd"
              placeholder="选择日期">
          </el-date-picker>
       </el-form-item>

       <el-form-item label="邮箱：">
         <el-input v-model="member.email"></el-input>
       </el-form-item>
        <el-form-item label="喜好：">
         <el-input v-model="member.hobby"></el-input>
       </el-form-item>
        <el-form-item label="推荐人：">
         <el-input v-model="member.referral"></el-input>
       </el-form-item>
        <el-form-item label="状态：">
           <el-radio-group v-model="member.status">
            <el-radio :label="1">可用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
       </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('memberForm')">提交</el-button>
        <el-button v-if="!isEdit" @click="resetForm('memberForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import {createMember, getMember, updateMember} from '@/api/ums/member'
  import {fetchList as listGroup} from '@/api/ums/umsMemberGroup'
  import {fetchList as listTag} from '@/api/ums/umsMemberTag'


  const defaultMember={
    nickname: '',
    phone: '',
    shopQq: '',
    shopWechat: '',
    birthday: '',
    shopAnniversary: '',
    shopEmail: '',
    shopHobby: '',
    shopReferral: '',
    status: 1
  };

  export default {
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        member:Object.assign({}, defaultMember),
        groups:[],
        tags:[],
        rules: {
          username: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          logo: [
            {required: false, message: '请输入品牌logo', trigger: 'blur'}
          ],
          sort: [
            {type: 'number', message: '排序必须为数字'}
          ],
        }
      }
    },
    created() {
      if (this.isEdit) {
        getMember(this.$route.query.id).then(response => {
          this.member = response.data;
        });
      }else{
        this.member = Object.assign({},defaultMember);
      }
      this.getTags()
      this.getGroups()
    },
    methods: {
      groupChange(v){
        for(let item of this.groups){
          if(v==item.id){
            this.member.groupName=item.name;
            break;
          }
        }
      },
      tagChange(v){
        for(let item of this.tags){
          if(v==item.id){
            this.member.tagName=item.name;
            break;
          }
        }
      },
      getTags(){
          listTag({pageNum: 1, pageSize: 100}).then(response => {
              this.tags=response.data.records;
          });
      },
      getGroups(){
          listGroup({pageNum: 1, pageSize: 100}).then(response => {
              this.groups=response.data.records;
          });
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否提交数据', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              if (this.isEdit) {
                updateMember(this.member).then(response => {
                  this.$refs[formName].resetFields();
                  this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration:1000
                  });
                  this.$router.back();
                });
              } else {
                createMember(this.member).then(response => {
                  this.$refs[formName].resetFields();
                  this.member = Object.assign({},defaultMember);
                  this.$message({
                    message: '提交成功',
                    type: 'success',
                    duration:1000
                  });
                });
              }
            });

          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.member = Object.assign({},defaultMember);
      }
    }
  }
</script>
<style>
</style>


